<template>
  <div class="upload-container">
    <el-upload class="upload-demo" drag :action="uploadUrl" :auto-upload="false" :multiple="false"
      :on-change="handleFileChange" :on-remove="handleFileRemove" accept="image/*">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        选择文件 <em>并上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          支持上传图片文件（jpg、png、tiff、gif），单个文件不超过 20 MB
        </div>
      </template>
    </el-upload>

    <div class="options-row">
      <div class="option-group">
        <div class="option-label">文本排版方向：</div>
        <el-select v-model="textDirection" class="direction-select" placeholder="请选择排版方向">
          <el-option label="自动" value="auto" />
          <el-option label="竖排" value="vertical" />
          <el-option label="横排" value="horizontal" />
        </el-select>
      </div>

      <div class="option-group">
        <div class="option-label">字体选项：</div>
        <el-select v-model="fontStyle" class="font-select" placeholder="请选择字体">
          <el-option label="楷书" value="kai" />
          <el-option label="隶书" value="li" />
          <el-option label="行书" value="xing" />
          <el-option label="篆书" value="zhuan" />
          <el-option label="魏碑" value="wei" />
          <el-option label="草书" value="cao" />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
import { useImageStore } from '@/stores/imageStore'

const uploadUrl = 'http://localhost:8080/Upload'
const imageUrl = ref<string>('')
const imageStore = useImageStore()

const textDirection = computed({
  get: () => imageStore.textDirection,
  set: (value) => imageStore.setTextDirection(value)
})
const fontStyle = ref('kai')

interface UploadFile {
  raw: File
  name: string
}

const handleFileChange = (file: UploadFile) => {
  // 创建本地预览URL
  imageUrl.value = URL.createObjectURL(file.raw)
  // 存储到 Pinia store
  imageStore.setSelectedImage(imageUrl.value)
}

const handleFileRemove = () => {
  if (imageUrl.value) {
    URL.revokeObjectURL(imageUrl.value)
    imageUrl.value = ''
    imageStore.setSelectedImage('')
  }
}
</script>

<style scoped>
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.upload-demo {
  width: 100%;
  max-width: 800px;
}

.options-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  margin-top: 20px;
  padding: 0 20px;
  gap: 20px;
}

.option-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-label {
  font-size: 14px;
  color: #606266;
}

.direction-select,
.font-select {
  width: 100%;
}

.el-icon--upload {
  height: 15vh;
  width: 15vw;
}

.el-upload__text {
  font-size: clamp(14px, 1.5vw, 20px);
  margin: 8px 0;
}

.el-upload__tip {
  font-size: clamp(12px, 0.8vw, 16px);
  margin-top: 4px;
}

:deep(.el-upload-dragger) {
  padding: 20px;
  height: auto;
}

@media (max-width: 768px) {
  .options-row {
    flex-direction: column;
    gap: 15px;
  }

  .option-group {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .el-icon--upload {
    height: 20vh;
    width: 20vw;
  }

  .el-upload__tip {
    font-size: 8px;
  }
}
</style>

export default {}